<template>
	<div id="PersonalCenter">
		<div id="userInfo">
			<div class="userInfo-title ">
				<p>个人信息</p>
			</div>
			<div class="u-info">
				<table>
					<tr>
						<td class="td-name">用户名：</td>
						<td class="td-value">{{user.username}}</td>
						<td class="td-name">密码：</td>
						<td class="td-value">{{user.password}}</td>
					</tr>
					<tr>
						<td class="td-name">身份：</td>
						<td class="td-value">{{user.level | level}}</td>
						<td class="td-name">年龄：</td>
						<td class="td-value">{{user.answer | age}}</td>
					</tr>
					<tr>
						<td class="td-name">昵称：</td>
						<td class="td-value"><input type="text" v-model="user.name" class="input-info" maxlength="10" /></td>
						<td class="td-name">性别：</td>
						<td class="td-value"><input type="text" class="input-info" v-model="user.sex" maxlength="1" style="width:100px;"></td>
					</tr>

					<tr>
						<td class="td-name">邮箱：</td>
						<td class="td-value"><input type="text" class="input-info" v-model="user.mail" maxlength="25">
						</td>
						<td>
							<el-button class="btn" @click="updateUserInfo" type="primary" size="small">保存信息</el-button>
						</td>
					</tr>
				</table>
			</div>
			<div id="userPic">
				<img v-bind:src="userpic" class="img-pic" width="70" height="70" />
				<div class="file-upload">
					<button class="file-btn">修改头像</button>
					<input type="file" class="file-pic" name="aaa" accept="image/png,image/jpg,image/jpeg" @change="uploadUser($event)"
					 ref="upload-pic" />
				</div>

			</div>

		</div>
		<div id="carInfo" v-if="carflag">
			<div class="carInfo-title">
				<p>车辆信息</p>
			</div>
			<div class="u-info" >
				<table>
					<tr>
						<td class="td-name">车牌号：</td>
						<td class="td-value">{{car.license_num}}</td>

					</tr>
					<tr>
						<td class="td-name">车辆类型：</td>
						<td class="td-value">{{car.type}}</td>
					</tr>
					<tr>
						<td class="td-name">车辆品牌：</td>
						<td class="td-value">{{car.brand}}</td>
					</tr>
					

					<tr>
						<td class="td-name">现在位置：</td>
						<td class="td-value">
							<span v-if="!flag">({{car.cur_loc_lon}},{{car.cur_loc_lat}})</span>
							<span v-if="flag">{{loc}}</span>
						</td>
						<td>
							<el-button @click="flag = !flag" type="info" size="small">解析</el-button>
						</td>
					</tr>


				</table>
			</div>
			<div id="carPic">
				<img v-bind:src="carpic" class="img-pic" width="70" height="70" />
				<div class="file-upload">
					<button class="file-btn">修改图片</button>
					<input type="file" class="file-pic" name="aaa" accept="image/png,image/jpg,image/jpeg" @change="uploadCar($event)"
					 ref="upload-pic" />
				</div>

			</div>
		</div>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				car: {},
				id: '',
				userpic: require('@/assets/beforelogin.png'),
				carpic: require('@/assets/car.png'),

				flag: false,
				carflag: false,
				userOldPic: '',
				carOldPic: '',

			}
		},
		filters: {
			level: (value) => {
				if (value == 0) {
					return "普通用户"
				}
				if (value == 1) {
					return "管理员"
				}
			},
			age: (value = '') => {
				let a = [];
				a = value.split('-');
				let date = new Date();
				let year = date.getFullYear();
				return year - a[0];
			}
		},
		created() {
			this.id = this.$route.query.user_id;
			this.asyncInfo()
		},

		methods: {
			async asyncInfo() {
				await this.getUserInfo();
				await this.getUserPic();
			},
			getUserInfo() {
				this.$axios.get('/api/info/userInfo', {
						params: {
							id: this.id
						}
					})
					.then(data => {
						if (data.status == 200) {
							this.user = data.data[0];
							if (this.user.car == null) {
								this.carflag = false;
							} else {
								this.carflag = true;
								this.getCarInfoByNum(this.user.car)

							}


							if (this.user.id === this.$store.state.user[0].id) {
								this.$store.commit('setStorage', data.data)
							}
							return;
						}
					})
					.catch(err => {
						console.log(err)
					})
			},

			getUserPic() {
				this.$axios.get('/api/upload/getUserPic', {
						params: {
							user_id: this.id
						},
						responseType: 'blob'
					})
					.then(data => {
						if (data.status == 200) {
							if (data.data.size != 0) {

								let reader = new FileReader()
								reader.onload = e => {
									this.userpic = e.target.result
								}
								reader.readAsDataURL(data.data);
							}
						}
					})
				this.$axios.get('/api/upload/getUserPicDir', {
						params: {
							user_id: this.id
						},
					})
					.then(data => {
						if (data.status == 200) {
							if (data.data.size != 0) {
								this.userOldPic = data.data;

							}
						}
					})
			},
			uploadUser(event) {
				let regx = /image/;
				let file = event.target.files[0];
				if (regx.test(file.type)) {
					let data = new FormData()
					data.append('file', file);
					data.append('id', this.id)
					this.$axios.post('/api/upload/uploadUserPic', data, {
							headers: {
								'Content-Type': 'multipart/form-data'
							},
						})
						.then(data => {
							if (data.status == 200) {
								this.getUserInfo();
								this.getUserPic();
								this.deletePic(this.userOldPic);
							}
						})
				}

			},
			//上传成功后删除原先服务器的图片
			deletePic(oldPic) {
				if (this.oldPic != '') {
					this.$axios.get('/api/upload/deleteUserPic', {
						params: {
							oldPic: oldPic
						}
					}).catch(err => {
						console.log(err)
					})
				}

			},
			updateUserInfo() {
				let info = {
					id: this.id,
					sex: this.user.sex,
					name: this.user.name,
					mail: this.user.mail
				}
				this.$axios.post('/api/info/updateUserInfo', {
						user: info
					})
					.then(data => {
						if (data.status == 200) {
							this.getUserInfo();
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			getCarInfoById() {
				this.$axios.get('/api/info/carInfo', {
						params: {
							id: this.car.id
						}
					})
					.then(data => {
						if (data.status == 200) {
							this.car = data.data[0];
							this.getLocation(this.car)
							this.getCarPic(this.car.id);
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			getCarInfoByNum(car_num) {
				this.$axios.get('/api/info/carInfoByNum', {
						params: {
							num: car_num
						}
					})
					.then(data => {
						if (data.status == 200) {
							this.car = data.data[0];

							this.getLocation(this.car)
							this.getCarPic(this.car.id);
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			uploadCar(event) {
				let regx = /image/;
				let file = event.target.files[0];
				if (regx.test(file.type)) {

					let data = new FormData()
					data.append('file', file);
					data.append('id', this.car.id)
					this.$axios.post('/api/upload/uploadCarPic', data, {
							headers: {
								'Content-Type': 'multipart/form-data'
							},
						})
						.then(data => {
							if (data.status == 200) {
								this.getCarInfoById();
								this.getCarPic(this.car.id);
								this.deletePic(this.carOldPic);
							}
						})
				}

			},
			getCarPic(car_id) {
				this.$axios.post('/api/upload/getCarPic', {
						car_id: car_id
					}, {
						responseType: 'blob'
					})
					.then(data => {
						if (data.status == 200) {
							if (data.data.size != 0) {
								let reader = new FileReader()
								reader.onload = e => {
									this.carpic = e.target.result
								}
								reader.readAsDataURL(data.data);
							}
						}
					})
					.catch(err => {
						console.log(err)
					})


				this.$axios.get('/api/upload/getCarPicDir', {
						params: {
							car_id: this.car.id
						},
					})
					.then(data => {
						if (data.status == 200) {
							if (data.data.size != 0) {
								this.carOldPic = data.data;

							}
						}
					})

			},
			getLocation(car) {
				this.ptList = new BMap.Point(car.cur_loc_lon, car.cur_loc_lat)

				let geoc = new BMap.Geocoder();

				geoc.getLocation(this.ptList, (result) => {
					let addComp = result.addressComponents;
					this.loc = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " +
						addComp.streetNumber;
				})

			},
		}
	}
</script>

<style lang="less" scoped>
	#PersonalCenter {
		width: 80%;
		margin-top: 50px;
		margin-left: 88px;
		background-color: #fff;

		.title() {
			border-bottom: 1px solid #E0ECFF;
			width: 100%;
			height: 26px;
			font-size: 18px;
			text-align: left;
			color: black;
			background: -webkit-linear-gradient(top, #EFF5FF 0, #E0ECFF 100%);
			background: -moz-linear-gradient(top, #EFF5FF 0, #E0ECFF 100%);
			background: -o-linear-gradient(top, #EFF5FF 0, #E0ECFF 100%);
			background: linear-gradient(to bottom, #EFF5FF 0, #E0ECFF 100%);
		}

		.td-table(@w, @ta) {
			width: @w;
			height: 40px;
			line-height: 40px;
			text-align: @ta;
		}

		.td-name {
			.td-table(92px, right)
		}

		.td-value {
			.td-table(160px, left)
		}

		#userInfo,#carInfo {
			border: 1px solid #E0ECFF;
			position: relative;

			.userInfo-title,.carInfo-title {
				.title();

				p {
					width: 300px;
					line-height: 26px;
					padding-left: 2px;
				}
			}

			.u-info {
				color: #000;
				font-size: 16px;


			}

			#userPic,#carPic{
				border: 1px solid #E0ECFF;
				width: 80px;
				height: 110px;
				position: absolute;
				top: 30px;
				right: 20px;

				.img-pic {
					border-radius: 50%;
				}

				.file-upload {
					position: relative;
					margin-top: 10px;

					.file-pic {
						position: absolute;
						top: 0;
						left: 0;
						opacity: 0;
					}

					.file-btn {
						width: 70px;
						font-size: 12px;
					}

				}
			}
			#img-pic{
				border-radius:0 !important; 
			}

			.input-info {
				border: 1px solid #000;
				width: 200px;
			}

		}


	}
</style>
